<template>
	<div class="section-container ">
		<el-form ref="ruleForm" label-width="150px" class="demo-ruleForm" style="margin-top: 50px;" size="small">
			<el-form-item :prop="item.menu_name" v-for="(item,index) in config" :key="index">
				<template #label>
					<div style="line-height: 40px;height: 100%;">
						{{item.label}}
						<el-tooltip v-if="item.msg" class="item" effect="dark" :content="item.msg"
							placement="top-start">
							<el-icon size="15" color="#cccccc">
								<question-filled />
							</el-icon>
						</el-tooltip>
					</div>

				</template>
				<el-input v-if="item.model=='input'" v-model="item.value.value" :placeholder="item.info"
					:type="item.type" :rows="item.params?item.params.row:3">
				</el-input>
				<el-input-number v-else-if="item.model=='inputNumber'" v-model="item.value.value"
					:placeholder="item.info">
				</el-input-number>

				<el-switch v-else-if="item.model=='switch'" v-model="item.value.value" :active-value="1"
					:inactive-value="0">
				</el-switch>
				<el-date-picker v-else-if="item.model=='dateShort'" v-model="item.value.value" type="date"
					placeholder="选择日期时间" value-format="YYYY-MM-DD">
				</el-date-picker>

				<UploadImage v-model:url="item.value.value" v-else-if="item.model=='image'" />
				<UploadImages v-else-if="item.model=='images'" v-model:urls="item.value.value" />
				<UploadFile v-model:url="item.value.value" v-else-if="item.model=='file'" />
				<UploadVideo v-model:url="item.value.value" v-else-if="item.model=='video'" />
				<Tinymce style="z-index: 10000;" v-else-if="item.model=='tiny'" v-model:value="item.value.value" />
				<el-radio-group v-else-if="item.model=='radioButton'" v-model="item.value.value" fill="#409eff">
					<el-radio-button v-for="(value, ii) in item.params.value" :key="ii" :label="value.value">
						{{value.label}}
					</el-radio-button>
				</el-radio-group>
				<el-input v-else-if="item.model=='inputPath'" v-model="item.value.value" :placeholder="item.info"
					:type="item.type">
					<template #append>
						<el-button type="primary" @click="selectOne(item)">
							去选择
						</el-button>
					</template>
				</el-input>

			</el-form-item>

		</el-form>
	</div>
</template>

<script>
	import {
		QuestionFilled
	} from '@element-plus/icons-vue'
	import UploadImage from '/@/components/upload/UploadImage.vue'
	import UploadFile from '/@/components/upload/UploadFile.vue'
	import UploadImages from '/@/components/upload/UploadImages.vue'
	//import WMcheckedbox from '/@/components/from/WMcheckbox.vue'
	import UploadVideo from '/@/components/upload/UploadVideo.vue'
	import {
		reactive,
		defineComponent,
		ref

	} from 'vue';
	export default {
		name: 'config',
		components: {
			UploadImage,
			UploadFile,
			QuestionFilled,
			UploadVideo,
			UploadImages
		},
		props: {
			config: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		setup() {
			const show1 = ref(false)
			let info;
			const selectOne = (item) => {
				info = item
				show1.value = true
			}
			const selectPath = (value) => {
				info.value.value = value
				show1.value = false
				info = null;
			}
			return {
				show1,
				selectOne,
				selectPath
			}
		}


	}
</script>

<style>
</style>